<template>
    <div class="myorder">
        <!-- 这是我的订单页面 -->
        <div class="myorder-content">
            <h2>我的订单</h2>
            <div class="orderList">
                <a-row type="flex" justify="space-between">
                    <a-col 
                        :xs="22" :sm="22" :md="22" :lg="11" :xl="11" 
                        class="orderList-item" 
                        v-for="item in orderList" :key="item.id"
                    >
                        <ul>
                            <li>
                                <span>订单号</span>
                                <span>{{item.order_id}}</span>
                            </li>
                            <li>
                                <span>日期</span>
                                <span>{{item.createdAt}}</span>
                            </li>
                            <li>
                                <span>总计</span>
                                <span>{{item.total_price | demoMoney}}</span>
                            </li>
                            <li>
                                <span>订单状态</span>
                                <span>{{item.status | formatStatus}}</span>
                            </li>
                        </ul>
                        <div class="goodsDetailslist">
                            <div class="goodsDetails" v-for="item in item.goods_info" :key="item.id">
                                <img :src="item.s_goods_photos[0].path" alt="">
                                <div class="goodsDetails-text">
                                    <div>
                                        <span>{{item.desc.split("_")[0]}}</span>
                                        <span>{{item.goods_name}}</span>
                                    </div>
                                    <div>
                                        <span>
                                            数量：{{item.num}}
                                        </span>
                                        <span>
                                            {{item.price | demoMoney}}
                                        </span>
                                    </div>
                                    <div class="">
                                        总价：{{item.price * item.num | demoMoney}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="btn">
                            <div @click="gotoOrder(item.id)" v-if="item.status === '1'">
                                <span>继续支付</span>
                                <span class="iconfont icon--_jiantou"></span>
                            </div>
                        </div>
                        <a-icon type="close" class="delorder" @click="delOrder(item.id)"/>
                    </a-col>
                </a-row>
            </div>
        </div>
    </div>
</template>

<script>
import {mapState, mapActions} from "vuex"
// 订单状态(-1：已删除，0：已过期，1:已下单，2:已支付，3:已发货, 4:退货中，5:退款中，6:已完成，7：已取消)
const status_map ={
    "0": '已过期',
    "1": '已下单',
    "2": '已支付',
    "3": '已发货',
    "4": '退货中',
    "5": '退款中',
    "6": '已完成',
    "7": '已取消',
}
export default {
    filters:{
        // 格式化订单状态
        formatStatus(value) {
            return status_map[value]
        },
        demoMoney(value) {
            if(value) {
                if(typeof value === "number") {
                    value = +(String(value).split(".")[0])
                    return '￥' + value.toLocaleString() + ".00"
                } else {
                    value = value.split(".")[0]
                    return '￥' + Number(value).toLocaleString() + ".00"
                }
            }
        }
    },
    data() {
        return {

        }
    },
    async created() {
        // 请求订单列表
        this.getOrder({project_id: 18, limit:100})
    },
    methods: {
        ...mapActions('order', ["getOrder", "delVuexOrder"]),
        gotoOrder(id) {
            this.$router.push(`/order/${id}`)
        },
        // 删除订单
        async delOrder(id) {
            // 确认框中用到的当前作用域this需要提前替换为局部变量，否则浏览器会提示无法获取该属性。
            let self = this
            this.$confirm({
                title: '您确定要移除此订单吗？',
                okText: '确认',
                cancelText: '取消',
                async onOk() {
                    await self.delVuexOrder(id)
                    .then(() => {
                        // 请求订单列表
                        self.getOrder({project_id: 18, limit:100})
                        self.$message.success('删除成功');
                    })
                    .catch(() => {
                        self.$message.error('删除失败');
                    })
                },
                onCancel() {},
            });
        }
    },
    computed: {
        ...mapState('order', ["orderList"])
    },
}
</script>

<style lang="scss">
    .myorder {
        text-align: left;
        .myorder-content {
            width: 95%;
            margin: 20px auto;
            h2 {
                font-size: 32px;
                font-weight: 600;
                color: #003150;
                padding: 30px;
            }
            .orderList {
                .orderList-item{
                    margin: 0 0 30px;
                    background: white;
                    padding: 10px;
                    position: relative;
                    ul {
                        display: flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        border-bottom:1px solid #bbbbbb ;
                        li {
                            width: 50%;
                            display: flex;
                            flex-direction: column;
                            flex-wrap: wrap;
                            margin-bottom: 10px;
                            font-size: 16px;
                            span:first-child {
                                color: #8a8a8a;
                            }
                            span:last-child {
                                font-weight: 700;
                            }
                        }
                    }
                    .goodsDetailslist {
                        max-height: 275px;
                        overflow: auto;
                        .goodsDetails {
                            display: flex;
                            justify-content: space-evenly;
                            padding: 15px 0;
                            border-bottom: 1px solid #bbbbbb;
                            img {
                                width: 50%;
                            }
                            .goodsDetails-text {
                                padding: 0 15px;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;
                                div {
                                    font-size: 16px;
                                    color: #8a8a8a;
                                    display: flex;
                                    flex-direction: column;
                                    span:last-child {
                                        font-weight: 600;
                                        color: #003150;
                                    }
                                }
                                div:last-child {
                                    font-weight: 600;
                                    color: #003150;
                                }
                            }
                        }
                    }
                    
                    .btn {
                        padding: 10px 0;
                        display: flex;
                        justify-content: flex-end;
                        div {
                            align-items: flex-end;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            color: white;
                            background-color: #003150;
                            width: 50%;
                            height: 50px;
                            padding: 30px 20px;
                            span {
                                font-size: 14px;
                                font-weight: 600;
                            }
                            .icon--_jiantou {
                                font-size: 25px;
                            }
                            &:hover {
                                background-color: white;
                                color: #003150;
                                border: 1px solid #003150;
                            }
                        }
                    }
                    .delorder {
                        position: absolute;
                        top: 15px;
                        right: 15px;
                        font-size: 20px;
                    }
                }
            }
        }
    }
</style>